<script lang="ts" setup>
import RankedBronze from '@/assets/images/ranked-icons-large/bronze.png'
import RankedChallenger from '@/assets/images/ranked-icons-large/challenger.png'
import RankedDiamond from '@/assets/images/ranked-icons-large/diamond.png'
import RankedEmerald from '@/assets/images/ranked-icons-large/emerald.png'
import RankedGold from '@/assets/images/ranked-icons-large/gold.png'
import RankedGrandmaster from '@/assets/images/ranked-icons-large/grandmaster.png'
import RankedIron from '@/assets/images/ranked-icons-large/iron.png'
import RankedMaster from '@/assets/images/ranked-icons-large/master.png'
import RankedPlatinum from '@/assets/images/ranked-icons-large/platinum.png'
import RankedSilver from '@/assets/images/ranked-icons-large/silver.png'
import RankedNone from '@/assets/images/ranked-icons-large/unranked.png'
import BronzeMedal from '@/assets/images/ranked-icons/bronze.png'
import ChallengerMedal from '@/assets/images/ranked-icons/challenger.png'
import DiamondMedal from '@/assets/images/ranked-icons/diamond.png'
import EmeraldMedal from '@/assets/images/ranked-icons/emerald.png'
import GoldMedal from '@/assets/images/ranked-icons/gold.png'
import GrandmasterMedal from '@/assets/images/ranked-icons/grandmaster.png'
import IronMedal from '@/assets/images/ranked-icons/iron.png'
import MasterMedal from '@/assets/images/ranked-icons/master.png'
import PlatinumMedal from '@/assets/images/ranked-icons/platinum.png'
import SilverMedal from '@/assets/images/ranked-icons/silver.png'

import { computed, defineProps, useAttrs } from 'vue'

const props = defineProps({
  tier: {
    type: String,
    required: true,
  },
  size: {
    type: String,
    default: 'large',
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
})

const attrs = useAttrs()

// 段位图标
const tierIcon = {
  bronze: RankedBronze,
  challenger: RankedChallenger,
  diamond: RankedDiamond,
  emerald: RankedEmerald,
  gold: RankedGold,
  grandmaster: RankedGrandmaster,
  iron: RankedIron,
  master: RankedMaster,
  platinum: RankedPlatinum,
  silver: RankedSilver,
  unranked: RankedNone,
}

const smallTierIcon = {
  bronze: BronzeMedal,
  challenger: ChallengerMedal,
  diamond: DiamondMedal,
  emerald: EmeraldMedal,
  gold: GoldMedal,
  grandmaster: GrandmasterMedal,
  iron: IronMedal,
  master: MasterMedal,
  platinum: PlatinumMedal,
  silver: SilverMedal,
  unranked: RankedNone,
}

const src = computed(() => {
  if (props.size === 'small') {
    return smallTierIcon[props.tier] || smallTierIcon.unranked
  } else {
    return tierIcon[props.tier] || tierIcon.unranked
  }
})
</script>

<template>
  <img v-bind="$attrs" :src="src" :style="{ width, height }">
</template>
